<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-12-04 15:42:25
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-01-23 11:44:33
 * @FilePath: \cxl-driving-training\src\components\form\mapSelete.vue
-->
<template>
    <div class="input-container" style="width: 100%">
        <el-input v-model="drawerData.address" readonly @click="onClickInput" placeholder="请输入详细地址" />
        <drawer :data="drawerData" @close="onDrawerClose" @change="onDrawerChange"></drawer>
    </div>
</template>

<script setup lang="ts">
import { reactive, watchEffect } from 'vue'
import drawer from '@/components/form/drawer.vue'

const props = defineProps(['value', 'disabled', 'latLng'])
const emits = defineEmits(['change'])

const drawerData = reactive({
    visible: false,
    address: '',
    lat: '',
    lng: ''
})

watchEffect(() => {
    console.log(props)
    drawerData.address = props.value
    if (props.value) {
        drawerData.lat = props.latLng ? props.latLng[0] : ''
        drawerData.lng = props.latLng ? props.latLng[1] : ''
    }
})

const onClickInput = () => {
    drawerData.visible = props.disabled ? false : true
    console.log(drawerData.visible)
}
const onDrawerClose = () => {
    drawerData.visible = false
}
const onDrawerChange = (res: any) => {
    drawerData.visible = false
    drawerData.address = res.address
    emits('change', res)
}
</script>

<style scoped lang="scss">
.input-container {
    overflow: hidden;
}
.input-container .input {
    width: 100%;
    height: 32px;
    line-height: 32px;
    padding: 1px 11px;
    background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
    background-image: none;
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    cursor: text;
    transition: var(--el-transition-box-shadow);
    transform: translate3d(0, 0, 0);
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}
</style>
